<template>
    <view class="login-container">
        <!-- Logo区域 -->
        <view class="logo-box">
            <image class="logo" src="/static/logo.png" mode="aspectFit" />
            <text class="title">欢迎登录</text>
        </view>

        <!-- 手机号登录表单 -->
        <view class="login-form" v-if="loginType === 'phone'">
            <view class="input-group">
                <view class="input-label">手机号</view>
                <view class="input-box">
                    <text class="area-code">+86</text>
                    <input 
                        type="number" 
                        v-model="phone" 
                        maxlength="11"
                        placeholder="请输入手机号"
                        class="input"
                    />
                </view>
                <view class="divider"></view>
            </view>

            <view class="input-group">
                <view class="input-label">验证码</view>
                <view class="input-box">
                    <input 
                        type="number" 
                        v-model="code" 
                        maxlength="6"
                        placeholder="请输入验证码"
                        class="input"
                    />
                    <text 
                        class="code-btn" 
                        :class="{ 'disabled': counting || !isPhoneValid }"
                        @click="sendCode"
                    >
                        {{ countText }}
                    </text>
                </view>
                <view class="divider"></view>
            </view>

            <button class="login-btn" :class="{ 'active': isFormValid }" @click="handlePhoneLogin">
                登录/注册
            </button>

            <view class="tips">
                注册/登录即代表您同意
                <text class="link">用户协议</text>
                和
                <text class="link">隐私政策</text>
            </view>
        </view>

        <!-- 微信登录按钮 -->
        <view class="other-login" v-if="loginType === 'wechat'">
            <button 
                class="wechat-btn" 
                open-type="getAuthorize" 
                scope="userInfo" 
                @getAuthorize="handleWechatLogin"
            >
                <text class="iconfont icon-wechat"></text>
                微信一键登录
            </button>
        </view>

        <!-- 切换登录方式 -->
        <view class="switch-type" @click="switchLoginType">
            <text class="switch-text">{{ loginType === 'phone' ? '微信一键登录' : '手机号登录' }}</text>
        </view>
    </view>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue';

export default defineComponent({
    setup() {
        // 登录方式
        const loginType = ref<'phone' | 'wechat'>('phone');
        // 手机号
        const phone = ref('');
        // 验证码
        const code = ref('');
        // 倒计时
        const countdown = ref(0);
        // 是否在倒计时中
        const counting = ref(false);

        // 验证手机号格式
        const isPhoneValid = computed(() => {
            return /^1[3-9]\d{9}$/.test(phone.value);
        });

        // 倒计时文本
        const countText = computed(() => {
            if (counting.value) {
                return `${countdown.value}s后重新获取`;
            }
            return '获取验证码';
        });

        // 发送验证码
        const sendCode = async () => {
            if (!isPhoneValid.value) return;
            try {
                // TODO: 调用发送验证码API
				
                counting.value = true;
                countdown.value = 60;
                const timer = setInterval(() => {
                    countdown.value--;
                    if (countdown.value <= 0) {
                        clearInterval(timer);
                        counting.value = false;
                    }
                }, 1000);
            } catch (error) {
                uni.showToast({
                    title: '发送失败，请重试',
                    icon: 'none'
                });
            }
        };

        // 手机号登录
        const handlePhoneLogin = async () => {
            if (!isPhoneValid.value) {
                uni.showToast({
                    title: '请输入正确的手机号',
                    icon: 'none'
                });
                return;
            }
            if (!code.value) {
                uni.showToast({
                    title: '请输入验证码',
                    icon: 'none'
                });
                return;
            }
            try {
                // TODO: 调用登录API
                // const res = await login({ phone: phone.value, code: code.value });
                // 处理登录成功
            } catch (error) {
                uni.showToast({
                    title: '登录失败，请重试',
                    icon: 'none'
                });
            }
        };

        // 微信登录
        const handleWechatLogin = async () => {
            try {
                // TODO: 调用微信登录API
                // const res = await wechatLogin();
                // 处理登录成功
            } catch (error) {
                uni.showToast({
                    title: '登录失败，请重试',
                    icon: 'none'
                });
            }
        };

        // 切换登录方式
        const switchLoginType = () => {
            loginType.value = loginType.value === 'phone' ? 'wechat' : 'phone';
        };

        // 添加 isFormValid 计算属性
        const isFormValid = computed(() => {
            return isPhoneValid.value && code.value.length === 6;
        });

        return {
            loginType,
            phone,
            code,
            counting,
            countText,
            isPhoneValid,
            sendCode,
            handlePhoneLogin,
            handleWechatLogin,
            switchLoginType,
            isFormValid
        };
    }
});
</script>

<style scoped>
.login-container {
    padding: 40rpx;
    min-height: 100vh;
    background-color: #fff;
}

.logo-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 80rpx 0 100rpx;
}

.logo {
    width: 160rpx;
    height: 160rpx;
}

.title {
    margin-top: 30rpx;
    font-size: 40rpx;
    font-weight: 600;
    color: #333;
}

.login-form {
    padding: 0 30rpx;
}

.input-group {
    margin-bottom: 40rpx;
}

.input-label {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 16rpx;
    font-weight: 500;
}

.input-box {
    display: flex;
    align-items: center;
    height: 88rpx;
}

.area-code {
    font-size: 28rpx;
    color: #333;
    margin-right: 24rpx;
    font-weight: 500;
}

.input {
    flex: 1;
    height: 100%;
    font-size: 32rpx;
    color: #333;
}

.divider {
    height: 1px;
    background-color: #EEEEEE;
    margin-top: 4rpx;
}

.code-btn {
    font-size: 28rpx;
    color: #576B95;
    padding-left: 24rpx;
    position: relative;
}

.code-btn::before {
    content: '';
    position: absolute;
    left: 12rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 32rpx;
    background-color: #EEEEEE;
}

.code-btn.disabled {
    color: #999;
}

.login-btn {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    border-radius: 45rpx;
    background-color: #1989FA;
    color: #fff;
    font-size: 32rpx;
    margin-top: 80rpx;
    opacity: 0.6;
}

.login-btn.active {
    opacity: 1;
}

.tips {
    margin-top: 24rpx;
    font-size: 24rpx;
    color: #999;
    text-align: center;
}

.link {
    color: #576B95;
}

.wechat-btn {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    border-radius: 45rpx;
    background-color: #07C160;
    color: #fff;
    font-size: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.switch-type {
    margin-top: 60rpx;
    text-align: center;
}

.switch-text {
    display: inline-block;
    padding: 20rpx 40rpx;
    font-size: 28rpx;
    color: #576B95;
}

/* 占位符样式 */
::-webkit-input-placeholder {
    color: #999;
    font-size: 28rpx;
}
</style>